import { defineComponent, CSSProperties } from 'vue'
import  arrow_up from '@img/arrow_up.png'
import  arrow_down from '@img/arrow_down.png'
import { useRouter } from 'vue-router'

export default defineComponent({
    name: "cardItem",
    props: ['currentItem'],
    setup(_, { }) {

        let pathName = window.sessionStorage.getItem('userRole');

        let isReview = pathName == '/review';

        const router = useRouter();


        // - 0 草稿
        // - 1 进行中
        // - 2 已过期

        type ActiveBorderType = 0 | 1 | 2;

        const ActiveColor = new Map([
            [0, { color: 'transparent', txt: '未发布' }],
            [1, { color: '#43CF7C', txt: '剩余' }],
            [2, { color: '#E5E5E5', txt: '过期' }],
        ])

        const activeBorder = (status: ActiveBorderType) => {

        }

        const calculateDaysBetween = (start, end) => {
            // 计算时间戳差（毫秒）
            const diffInMilliseconds = Math.abs(start - end);

            // 将毫秒数转换为天数，1天 = 86400000毫秒
            const diffInDays = diffInMilliseconds / 86400000;

            return Math.ceil(diffInDays); // 返回整数部分（向下取整）
        }
        const formatTimestamp = (timestamp) => {
            // 创建一个 Date 对象
            const date = new Date(timestamp); // 时间戳是秒为单位，需乘以 1000
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需加 1
            const day = String(date.getDate()).padStart(2, "0"); // 日期保证两位
            const hours = String(date.getHours()).padStart(2, '0'); // 小时
            const minutes = String(date.getMinutes()).padStart(2, '0'); // 分钟
            const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒

            return `${year}年${month}月${day}日`;
        }

        const goViewDetail = (status, item) => {
            router.push(isReview ? `/reviewDetail?id=${item.id}` : `/fillInDetail?id=${item.id}`)
        }

        const creatPage = (item) => {
            router.push(`/fillInCreate?eventId=${item.id}`)
        }

        const downScal = (item) => {
            if (item.show) {
                item.show = !item.show
            } else {
                item.show = true
            }
        }

        return () => (
            <>
                <div class="transition duration-1000 w-[960px] p-[25px_20px] flex flex-wrap items-center justify-between border-(1px solid #E5E5E5) rounded-[10px] relative mb-[16px] overflow-hidden">
                    <div class='flex justify-between items-center'>
                        <div class='border-(4px solid #e5e5e5) h-[70px] w-[70px] flex items-center justify-center flex-col rounded-100px'>
                            {
                                _.currentItem.status == 1 && <h3 class='text-(17px #000)' style={{ color: _.currentItem.day < 10 ? '#FF8D1A' : '#000' }}>{calculateDaysBetween(_.currentItem.endTime, (+new Date()))}天</h3>
                            }
                            <p class='text-(14px #808080)' style={{ color: _.currentItem.status == 0 ? '#000' : '#808080' }}>{ActiveColor.get(_.currentItem.status).txt}</p>
                        </div>

                        <div class='w-[360px] ml-[22px]'>
                            <h3 class='text-(18px #000)'>{_.currentItem.title}</h3>
                            <p class='mt-[8px] text-(14px #555)'>活动日期：{formatTimestamp(_.currentItem.beginTime)} - {formatTimestamp(_.currentItem.endTime)}</p>
                        </div>
                    </div>

                    <div class='flex items-center'>
                        <div class='text-center border-l-(1px solid #E5E5E5) p-[0_18px]'>
                            <p class='text-(20px #808080)'>{_.currentItem.numberOfQuestions || 0}</p>
                            <p class='text-(14px #808080)'>问卷题数</p>
                        </div>
                        {/* <div class='text-center border-l-(1px solid #E5E5E5) p-[0_18px]'>
                            <p class='text-(16px #808080)' style={{ color: _.currentItem.document ? '#FF8D1A' : '#808080' }}>{_.currentItem.document ? '需要' : '不需要'}</p>
                            <p class='text-(14px #808080) mt-[6px]'>文件征集</p>
                        </div>
                        <div class='text-center border-l-(1px solid #E5E5E5) p-[0_18px]'>
                            <p class='text-(16px #808080)' style={{ color: _.currentItem.multipleSubmission ? '#FF8D1A' : '#808080' }}>{_.currentItem.multipleSubmission ? '支持' : '不支持'}</p>
                            <p class='text-(14px #808080) mt-[6px]'>多项提交</p>
                        </div>
                        */}
                        {
                            isReview && (
                                <div class='text-center border-l-(1px solid #E5E5E5) p-[0_18px] mr-[10px]'>
                                    <p class='text-(20px #808080)'>{_.currentItem.number}</p>
                                    <p class='text-(14px #808080)'>完成提交</p>
                                </div>
                            )
                        }
                        {/* action  */}

                        <div class='w-[70px] flex items-center justify-center border-(1px solid #ddd) rounded-10px text-(14px #000) p-[4px_5px] cursor-pointer mr-[10px] gap-5px' onClick={() => downScal(_.currentItem)}>
                            {_.currentItem.show ? '收起' : '详情'}
                            <img src={_.currentItem.show ? arrow_up : arrow_down} alt="" class='w-15px' />
                        </div>
                        {
                            (isReview ? [1, 2].includes(+(_.currentItem.status)) : [2].includes(+(_.currentItem.status))) && !(_.currentItem.notAction) &&
                            <div class='w-[60px] flex items-center justify-center border-(1px solid #ddd) bg-#2A82E4 rounded-10px text-(14px #fff) p-[4px_10px] cursor-pointer' onClick={() => goViewDetail('look', _.currentItem)}>查看</div>
                        }

                        {
                            (isReview ? [0].includes(+(_.currentItem.status)) : [0, 1].includes(+(_.currentItem.status))) && !(_.currentItem.notAction) && (
                                <div class='w-[60px] flex items-center justify-center border-(1px solid #ddd) bg-#2A82E4 rounded-10px text-(14px #fff) p-[4px_10px] cursor-pointer' onClick={() => goViewDetail('edit', _.currentItem)}>查看</div>
                            )
                        }

                        {
                          !isReview && !([2].includes(+_.currentItem.status)) && <div class='w-[60px] flex items-center justify-center border-(1px solid #ddd) bg-#2A82E4 rounded-10px text-(14px #fff) p-[4px_10px] cursor-pointer ml-[10px]' onClick={() => creatPage(_.currentItem)}>填写</div>
                        }


                    </div>

                    <div class='w-full mt-[20px]' v-show={_.currentItem.show}>{_.currentItem.remark}</div>
                    <div class={['absolute left-0 top-0 w-[5px] h-[100%]']} style={{ background: ActiveColor.get(_.currentItem.status).color }}></div>
                </div>
            </>
        )
    },
})